@charset "utf-8";


/* Formatierungen die das ganze Dokument angehen */

html *
{
   font-family: Arial;
}

body
{
	margin:0% 15% 200px 15%;
	background-color: white;
	font-family: Arial;
}

h1
{
	font-size: 50px;
}

fieldset > input
{
	text-indent: 200px
}

.Logo 
{
	width: 70%;
}

.Titel
{
	color: white;
}

/* Spaltenbreiteklassen für Text und Bilder */

.Contentleft2 {
	float: left;
	width: 18%;
	margin-right: 2%;
}

.Contentleft3 {
	float: left;
	width: 28%;
	margin-right: 2%;
}

.Contentleft4 {
	float: left;
	width: 38%;
	margin-right: 2%
}

.Contentleft5 {
	float: left;
	width: 48%;
	margin-right: 2%
}

.Contentleft6 {
	float: left;
	width: 58%;
	margin-right: 2%
}

.Contentleft7 {
	float: left;
	width: 68%;
	margin-right: 2%
}

.Contentleft8 {
	float: left;
	width: 78%;
	margin-right: 2%
}

.Contentright2 {
	float: right;
	width: 18%;
	margin-left: 2%
}

.Contentright3 {
	float: right;
	width: 28%;
	margin-left: 2%
}

.Contentright4 {
	float: right;
	width: 38%;
	margin-left: 2%
}

.Contentright5 {
	float: right;
	width: 48%;
	margin-left: 2%
}

.Contentright6 {
	float: right;
	width: 58%;
	margin-left: 2%;
}

.Contentright7 {
	float: right;
	width: 68%;
	margin-left: 2%
}

.Contentright8 {
	float: right;
	width: 78%;
	margin-left: 2%
}

.Pokemon th {
	width: 16.5%;
}

.Pokemon td {
	width: 16.5%;
	text-align: center;
}

.Pokemon_Physical {
	font-size: 15px;
	background-color: grey;
}

.Pokemon_Special {
	font-size: 15px;
	background-color: lightblue;
}

.Pokemon_Mixed {
	font-size: 15px;
	background-color: lightgreen;
}


.Pokemon img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width: 100%;
	max-height: 150px;	
}

/* Weiterleitungsbuttons Produktionsseite */

.Weiterleitung {
	background-color: #333;
	border: none;
	color: white;
	padding: 1% 2%;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16;
	width: 20%;
}

.Weiterleitung:hover {
	background-color: #A10002;
	border: none;
	color: white;
	padding: 1% 2%;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16;
	width: 20%;
	transition: all 0.5s ease-in-out;
}

/* Weiterleitungsbuttons Projektseite */

.Weiterleitung2 {
	background-color: #333;
	border: none;
	color: white;
	padding: 1% 2%;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16;
	width: 40%;
}

.Weiterleitung2:hover {
	background-color: #A10002;
	border: none;
	color: white;
	padding: 1% 2%;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16;
	width: 40%;
	transition: all 0.5s ease-in-out;
}

/* Tabelle */

table {
	border-collapse: collapse;
	width: 100%;
}

th {
	border-bottom: 3px solid black;
	font-size: 20px;
}

td {
	border-bottom: 1.5px solid black;
	padding: 3px 5px 3px 5px;
	font-size: 20px;
}

td > span {
	font-size: 15px;
	padding: 5px 0 5px 0;
}

.Specbr {
	display: block;
	margin: 0 0 10px 0;
	content: " ";
}


.td1F {
	border-right: 1px solid #7C7C7C;
}

.td2F {
	border-right: 1px solid #7C7C7C;
	text-align: right;
}

.td3F {
	border-right: 1px solid #7C7C7C;
	text-align: center;
}

.td4F {
	border-right: 1px solid #7C7C7C;
	text-align: center;
}

.td5F {
	border-right: 1px solid #7C7C7C;
	text-align: right;
}

.td6F {
	width: 200px;
}

.td1G {
	border-right: 1px solid #7C7C7C;
}

.td2G {
	border-right: 1px solid #7C7C7C;
	text-align: center;
}

.td3G {
	border-right: 1px solid #7C7C7C;
	text-align: center;
}

.td4G {
	border-right: 1px solid #7C7C7C;
	text-align: center;
}

.td5G {
	width: 200px;
}

.td1C {
	border-right: 1px solid #7C7C7C;
	font-size: 30px;
}

.td2C {
	border-right: 1px solid #7C7C7C;
	font-size: 20px;
}

.td3C {
	width:145px;
}

.td1M {
	border-right: 1px solid #7C7C7C;
	font-size: 30px;
	width:40%;
}

.td2M {
	border-right: 1px solid #7C7C7C;
	font-size: 20px;
	width:30%;
}

.td3M {
	width:30%;
}

.td3M img {
	width:100%;
}


tr:hover {
	background-color: #f5f5f5
}

/* Navigationsbalken */

nav {
  overflow: hidden;
  background-color: #333;
  padding: 14px 10px;
  margin: 0px 0px 10px 0px;
  }

nav a {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  	color: white;
	text-decoration: underline;
	background-color: #FF2E31;
	transition: all 0.3s ease-in-out;
}

nav .active {
    background-color: #A10002;
    color: white;
}

nav > ul {
	list-style: none;
	text-align: center;
	margin:0;
	padding:0;
	float: left;
}

nav > ul > li {
	float: left;
}

nav > ul > li > ul {
	display: none;
	padding: 14px 16px;
}

nav > ul > a { 
	display: block;
	white-space: nowrap;
	padding: 10px;
	background: #A10002;
}

nav > ul > li:hover > ul {
	display: block;
	position: absolute;
	list-style:none;
}

nav > ul > li > ul > li {
	position: relative;
	background: #333;
	padding: 14px 16px;
}

nav > ul > li > ul > li:hover {
	background: #FF2E31;
	color: black;
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
}


/* Bodyrand */

#top, #bottom, #left, #right {
	position: fixed;
}
	
	#left, #right {
	top: 0; bottom: 0;
	width: 14%;
	
}

#left { left: 0;}
#right { right: 0;}

	#top, #bottom {
	left: 0; right: 0;
	background-color: black;
}

#top { top: 0; height: 10px}
#bottom { bottom: 0; height: 10px }

/* Kontaktformular*/

fieldset {
	background: white;
	border: 1px solid black;
	border-radius: 0.5em;
	margin: 0 0 1rem 0;
	list-style: none;
}

legend {
	background: #A10002;
	color: white;
	border: 1px solid black;
	border-radius: 0.5rem;
	box-shadow: 0 0 0.5rem #888;
	padding: 0.5rem 1rem;
}

input {
	margin: 5px 0px 5px 0px
}

li {
	list-style: none;
}

/*Monster Hunter Seite*/

.MHset {
	background: light#9A9A9A;
	border: 2px solid black;
	margin: 30px;
	padding: 50px;
	border-radius: 0.5em;
	list-style: none;
}

.MHleg {
	background: #434343;
	color: white;
	font-size: 20px;
	border: 2px solid black;
	border-radius: 0.5rem;
	box-shadow: 0 0 0.5rem #888;
	padding: 0.5rem 1rem;
}

/*Diagramm*/

.Diagramm {
position:relative;
padding:2% 10% 10% 25%;
border: 1px solid #000;
font-family:verdana;
width:100%;
height:450px;
background: #fff;
}

.Diagramm div.axis {
position:absolute;
width:80%;
height:80%;
border-bottom:1px solid black;
border-left:1px solid black;
}

.Diagramm div.title {
padding:0;
position:relative;
font:12px;
font-weight:bold;
top:0%;
text-align:center;
line-height:15px;
}

.Diagramm div.unit {
padding:0;
position:absolute;
bottom:2%;
left:25%;
width:65%;
font-size:8px;
text-align:center;
}

.Diagramm div.labelbox {
padding:0;
position:absolute;
left:1%;
width:17%;
height:80%;
line-height:30px;
}


.Diagramm div.label_a {
	top:10%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}

.Diagramm div.label_b {
	top:21%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}
		
.Diagramm div.label_c {
	top:32%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}

.Diagramm div.label_d {
	top:43%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}

.Diagramm div.label_e {
	top:54%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}
		
.Diagramm div.label_f {
	top:65%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}

.Diagramm div.label_g {
	top:76%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}

.Diagramm div.label_h {
	top:87%;
	color:black;
	position:absolute;
	left:0;
	height:10%;
	padding:0;
	font-size:12px;
}

.Diagramm div.balken_a {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:11%;
	background:#454C00;
}

.Diagramm div.balken_b {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:22%;
	background:green;
}

.Diagramm div.balken_c {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:33%;
	background:red;
}

.Diagramm div.balken_d {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:44%;
	background:#001D05;
}

.Diagramm div.balken_e {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:55%;
	background:#0019DC;
}

.Diagramm div.balken_f {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:66%;
	background:#951AFF;
}

.Diagramm div.balken_g {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:77%;
	background:silver;
}

.Diagramm div.balken_h {
	position:absolute;
	left:0;
	height:4%;
	padding:10px 0 0 0;
	text-align:right;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	top:88%;
	background:gold;
}